<template>
	<view class="root">
		<view class="relative">
			<image
				class="absolute width-100percent"
				src="/static/img/bg-profile.jpg"
				mode="widthFix"
			/>

			<label :style="{ margin: `30rpx`, zIndex: 1 }">
				<image
					class="bgc-eee width-96 height-96 br-circle"
					:src="businessInfo.avatarUrl"
					mode="aspectFill"
				/>
				<text
					:style="{
						textShadow: `0 9rpx 18rpx rgba(25, 49, 149, 0.24)`,
					}"
					class="f1 ellipsis fs-36 color-fff ml-20"
				>
					{{ businessInfo.nickName || "管理员" }}
				</text>
			</label>

			<view
				:style="{
					margin: `0 22rpx`,
					boxShadow: `0 1rpx 65rpx 0 rgba(247, 111, 111, 0.32)`,
					padding: `0 40rpx`,
					zIndex: 1,
				}"
				class="bgc-fff br-24"
			>
				<navigator
					url="/pages/businessBackground/Bill"
					hover-class="tap-hover"
					:style="{
						padding: `75rpx 0`,
						borderBottom: `1rpx solid #e5e5e5`,
					}"
					class="fd-row ai-center jc-sa"
				>
					<view class="ai-center">
						<text class="color-333 fs-28">今日营业额</text>
						<text class="color-222 fs-32 fw-700 mt-26">
							{{ businessInfo.day_money }}
						</text>
						<text class="color-888 fs-28 mt-60">
							昨日营业额：{{ businessInfo.yesterday_money }}
						</text>
					</view>
					<view class="ai-center">
						<text class="color-333 fs-28">今日订单数</text>
						<text class="color-222 fs-32 fw-700 mt-26">
							{{ businessInfo.day_len }}
						</text>
						<text class="color-888 fs-28 mt-60">
							昨日订单数：{{ businessInfo.yesterday_len }}
						</text>
					</view>
				</navigator>
				<view :style="{ padding: `18rpx 8rpx` }" class="fd-row ai-center jc-sb">
					<text class="color-333 fs-30">
						赏金 {{ Number(businessInfo.money_reward).toFixed(2) }}
					</text>
					<button
						hover-class="tap-hover"
						:style="{
							backgroundImage: `linear-gradient(-90deg, #FD4B3D, #FF7B6F)`,
							boxShadow: `0 9rpx 18rpx 0 rgba(243, 94, 103, 0.4)`,
							margin: 0,
							width: `200rpx`,
						}"
						class="color-fff fs-32 br-20 lh-80"
						:disabled="!Number(businessInfo.money_reward)"
						@click="grant"
					>
						发 放
					</button>
				</view>
			</view>
		</view>

		<view
			:style="{
				margin: `30rpx 22rpx`,
				boxShadow: `0 1rpx 65rpx 0 rgba(247, 111, 111, 0.32)`,
				padding: `0 40rpx`,
			}"
			class="bgc-fff br-24"
		>
			<text :style="{ borderBottom: `1rpx solid #e5e5e5` }" class="color-333 fs-32 lh-3">
				我的服务
			</text>

			<view :style="{ padding: `36rpx 0` }" class="fd-row flex-wrap">
				<navigator
					class="ai-center"
					hover-class="tap-hover"
					v-for="(item, key) in serviceOptions"
					:key="key"
					:style="{ width: `25%`, margin: `22rpx 0` }"
					:url="`/pages/businessBackground/${key}`"
				>
					<image
						class="width-66 height-66 br-circle bgc-eee"
						:src="`/static/img/icon-${key}.png`"
						mode="aspectFit"
					/>
					<text class="color-333 fs-28 mt-18">{{ item }}</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class index extends Vue {
		// component property
		serviceOptions: AnyObject = {
			ShareRedList: "分红列表",
			Activity: "活动设置",
			CollectionCode: "收款码",
			GetStoreCard: "储值卡",
			GetCommodity: "商品管理",
			HomeSetting: "首页设置",
			OrderList: "订单列表",
		};
		businessInfo: AnyObject = {
			day_money: "--",
			yesterday_money: "--",
			day_len: "--",
			yesterday_len: "--",
			money_reward: 0,
		};

		onLoad() {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/index/shopBackstage").then(({ data }) => {
				this.businessInfo = data;
				uni.hideLoading();
			});
		}
		grant() {
			this.$request.get("/index/upMoney").then(({ msg: title }) => {
				this.businessInfo.money_reward = 0;
				uni.showToast({ title });
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	button[disabled] {
		color: #fff;
	}
</style>